<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-row>
        <el-radio-group v-model="type">
          <el-radio-button label="1">差旅费报销凭证</el-radio-button>
          <el-radio-button label="2">因公出差审批单</el-radio-button>
          <el-radio-button label="3">伙食补助费申报表</el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-radio-group v-model="edit">
          <el-radio-button :label="true">编辑</el-radio-button>
          <el-radio-button :label="false">查看</el-radio-button>
        </el-radio-group>
        <el-button type="primary" icon="el-icon-printer" style="margin-left: 10px;float: right" @click="handlerPrint()">
          打印
        </el-button>
      </el-row>
      <el-row style="margin-top: 20px;display: flex;align-items: center;justify-content: center">
        <div id="table" :class="type==2?'col':'normal'" class="page">
          <template v-if="type==1">
            <table class="table" border="1" cellspacing="0">
              <tbody>
              <tr>
                <td style="border: none;font-size: 20px;font-weight: bold" colspan="12">差旅费报销凭证</td>
              </tr>
              <tr>
                <td style="border: none;text-align: left" colspan="2">报销单位：</td>
                <td style="border: none" colspan="3">
                  <template v-if="!edit">
                    {{ form.field1 }}
                  </template>
                  <el-cascader v-else v-model="form.field1" :options="department" :props="categoryProps"
                               style="width:100%"
                  />
                </td>
                <td style="border: none" colspan="3"></td>
                <td style="border: none"></td>
                <td style="border: none"></td>
                <td colspan="2" style="text-align: right;border: none">金额单位：元</td>
              </tr>
              <tr>
                <td colspan="2">姓名</td>
                <td colspan="2">
                  <template v-if="!edit">
                    {{ form.field2 }}
                  </template>
                  <el-input v-else type="text" v-model="form.field2"></el-input>
                </td>
                <td>部职别</td>
                <td colspan="5">
                  <template v-if="!edit">
                    {{ form.field3 }}
                  </template>
                  <el-input v-else type="text" v-model="form.field3"></el-input>
                </td>
                <td>同行人数</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field4 }}
                  </template>
                  <el-input v-else type="text" v-model="form.field4"></el-input>
                </td>
              </tr>
              <tr>
                <td colspan="2">到达地点</td>
                <td colspan="3">
                  <template v-if="!edit">
                    {{ form.field5 }}
                  </template>
                  <el-input v-else type="text" v-model="form.field5"></el-input>
                </td>
                <td colspan="2">出差日期</td>
                <td colspan="4">
                  <template v-if="!edit">
                    {{ form.field6 }}
                  </template>
                  <el-date-picker v-else v-model="time" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                                  start-placeholder="开始日期" end-placeholder="结束日期"
                  ></el-date-picker>
                </td>
                <td>
                  {{ form.field7 }}
                </td>
              </tr>
              <tr>
                <td colspan="2">类别</td>
                <td>单据张数</td>
                <td>申报金额</td>
                <td>核准金额</td>
                <td colspan="2">类别</td>
                <td>人数</td>
                <td>天数</td>
                <td>标准</td>
                <td>申报金额</td>
                <td>核准金额</td>
              </tr>
              <tr>
                <td rowspan="4" style="width: 30px">城市交通费</td>
                <td style="width: 100px">车、船票</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field8 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field8"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field9 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field9"></el-input>
                </td>
                <td>
                  {{ form.field9 }}
                </td>
                <td rowspan="5">住宿费</td>
                <td>战区级以上</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field11 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field11"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field12 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field12"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field13 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field13"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field14 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field14"></el-input>
                </td>
                <td>
                  {{ form.field14 }}
                </td>
              </tr>
              <tr>
                <td>飞机票</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field15 }}
                  </template>
                  <el-input  type="number" v-else v-model.number="form.field15"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field16 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field16"></el-input>
                </td>
                <td>
                  {{ form.field16 }}
                </td>
                <td>军级</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field18 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field18"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field19 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field19"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field20 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field20"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field21 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field21"></el-input>
                </td>
                <td>
                  {{ form.field21 }}
                </td>
              </tr>
              <tr>
                <td>订（退、改签）票</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field22 }}
                  </template>
                  <el-input type="number"  v-else v-model.number="form.field22"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field23 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field23"></el-input>
                </td>
                <td>
                  {{ form.field23 }}
                </td>
                <td>师级</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field25 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field25"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field26 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field26"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field27 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field27"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field28 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field28"></el-input>
                </td>
                <td>
                  {{ form.field28 }}
                </td>
              </tr>
              <tr>
                <td>小计</td>
                <td>{{ form.field8 + form.field15 + form.field22 }}</td>
                <td>{{ form.field9 + form.field16 + form.field23 }}</td>
                <td>{{ form.field9 + form.field16 + form.field23 }}</td>
                <td>其他人员</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field33 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field33"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field34 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field34"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field35 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field35"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field36 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field36"></el-input>
                </td>
                <td>
                  {{ form.field36 }}
                </td>
              </tr>
              <tr>
                <td colspan="2">市内交通</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field38 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field38"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field39 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field39"></el-input>
                </td>
                <td>
                  {{ form.field39 }}
                </td>
                <td>小计</td>
                <td>{{ form.field11 + form.field18 + form.field25 + form.field33 }}</td>
                <td>{{ form.field12 + form.field19 + form.field26 + form.field34 }}</td>
                <td>{{ form.field13 + form.field20 + form.field27 + form.field35 }}</td>
                <td>{{ form.field14 + form.field21 + form.field28 + form.field36 }}</td>
                <td>{{ form.field14 + form.field21 + form.field28 + form.field36 }}</td>
              </tr>
              <tr>
                <td colspan="2">行李托运费</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field46 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field46"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field47 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field47"></el-input>
                </td>
                <td>
                  {{ form.field47 }}
                </td>
                <td colspan="2">计发伙食补助费</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field49 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field49"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field50 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field50"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field51 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field51"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field52 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field52"></el-input>
                </td>
                <td>
                  {{ form.field52 }}
                </td>
              </tr>
              <tr>
                <td colspan="2">凭据报销伙食费</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field54 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field54"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field55 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field55"></el-input>
                </td>
                <td>
                  {{ form.field55 }}
                </td>
                <td colspan="2">预借款</td>
                <td>
                  <template v-if="!edit">
                    {{ form.field57 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field57"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field58 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field58"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field59 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field59"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form.field60 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field60"></el-input>
                </td>
                <td>
                  {{ form.field60 }}
                </td>
              </tr>
              <tr>
                <td colspan="2">申报金额</td>
                <td colspan="5">
                  ￥{{ form.field9 + form.field16 + form.field23 + form.field14 + form.field21 + form.field28 + form.field36 + form.field39 + form.field47 + form.field52 + form.field55 }}
                </td>
                <td colspan="2">开支项目</td>
                <td colspan="3">差旅费</td>
              </tr>
              <tr>
                <td colspan="2">核准金额</td>
                <td colspan="5">
                  ￥{{ form.field9 + form.field16 + form.field23 + form.field14 + form.field21 + form.field28 + form.field36 + form.field39 + form.field47 + form.field52 + form.field55 }}
                </td>
                <td colspan="2">退、补差额</td>
                <td colspan="3">
                  <template v-if="!edit">
                    {{ form.field64 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form.field64"></el-input>
                </td>
              </tr>
              <tr>
                <td style="border: none;text-align: left" colspan="9">审签领导：</td>
                <td style="border: none;text-align: left" colspan="3">财务复核人：</td>
              </tr>
              <tr>
                <td style="border: none;text-align: left" colspan="9">业务经办人：</td>
                <td style="border: none;text-align: left" colspan="3">财务审核人：</td>
              </tr>
              </tbody>
            </table>
          </template>
          <template v-else-if="type==2">
            <table class="table" border="1" cellspacing="0">
              <tbody>
              <tr>
                <td style="border: none;font-size: 20px;font-weight: bold" colspan="4">因公出差审批单</td>
              </tr>
              <tr>
                <td style="border: none;text-align: left;width: 120px">编制单位：</td>
                <td style="border: none;width: 300px;text-align: left">
                  <template v-if="!edit">
                    {{ form2.field1 }}
                  </template>
                  <el-cascader v-else v-model="form2.field1" :options="department" :props="categoryProps"
                               style="width:100%"
                  />
                </td>
                <td style="text-align: right;border: none;width: 200px" colspan="2">
                  <template v-if="!edit">
                    {{ form2.field2 }}
                  </template>
                  <el-date-picker v-else v-model="form2.field2" value-format="yyyy-MM-dd" style="width:100%"/>
                </td>
              </tr>
              <tr>
                <td>出差事由：</td>
                <td colspan="3">
                  <template v-if="!edit">
                    {{ form2.field3 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field3"></el-input>
                </td>
              </tr>
              <tr>
                <td>到达单位及地点：</td>
                <td colspan="3">
                  <template v-if="!edit">
                    {{ form2.field4 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field4"></el-input>
                </td>
              </tr>
              <tr>
                <td>起止时间：</td>
                <td colspan="3">
                  <template v-if="!edit">
                    {{ form2.field5 }}
                  </template>
                  <el-date-picker v-else v-model="time2" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                                  start-placeholder="开始日期" end-placeholder="结束日期"
                  ></el-date-picker>
                </td>
              </tr>
              <tr>
                <td>出行方式：</td>
                <td colspan="3">
                  <input id="check_1" type="checkbox"/>
                  <label for="check_1">飞机</label>
                  <input id="check_2" type="checkbox"/>
                  <label for="check_2">高铁/动车</label>
                  <input id="check_3" type="checkbox"/>
                  <label for="check_3">普通列车</label>
                  <input id="check_4" type="checkbox"/>
                  <label for="check_4">长途汽车</label>
                  <input id="check_5" type="checkbox"/>
                  <label for="check_5">轮船</label>
                  <input id="check_6" type="checkbox"/>
                  <label for="check_6">其他</label>
                </td>
              </tr>
              <tr>
                <td>出差人员</td>
                <td>部职别</td>
                <td>职级</td>
                <td>随员</td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form2.field7 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field7"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form2.field8 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field8"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form2.field9 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field9"></el-input>
                </td>
                <td>
                  <el-checkbox v-model="form2.field10"></el-checkbox>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form2.field11 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field11"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form2.field12 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field12"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form2.field13 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field13"></el-input>
                </td>
                <td>
                  <el-checkbox v-model="form2.field14"></el-checkbox>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form2.field15 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field15"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form2.field16 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field16"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form2.field17 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field17"></el-input>
                </td>
                <td>
                  <el-checkbox v-model="form2.field18"></el-checkbox>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form2.field19 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field19"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form2.field20 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field20"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form2.field21 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field21"></el-input>
                </td>
                <td>
                  <el-checkbox v-model="form2.field22"></el-checkbox>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form2.field23 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field23"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form2.field24 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field24"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form2.field25 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field25"></el-input>
                </td>
                <td>
                  <el-checkbox v-model="form2.field26"></el-checkbox>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form2.field27 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field27"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form2.field28 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field28"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form2.field29 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field29"></el-input>
                </td>
                <td>
                  <el-checkbox v-model="form2.field30"></el-checkbox>
                </td>
              </tr>
              <tr>
                <td>领<br/>导<br/>审<br/>批</td>
                <td colspan="3">

                </td>
              </tr>
              <tr>
                <td>备注</td>
                <td colspan="3">
                  <template v-if="!edit">
                    {{ form2.field32 }}
                  </template>
                  <el-input v-else type="text" v-model="form2.field32"></el-input>
                </td>
              </tr>
              </tbody>
            </table>
          </template>
          <template v-else-if="type==3">
            <table class="table" border="1" cellspacing="0">
              <tbody>
              <tr>
                <td style="border: none;font-size: 20px;font-weight: bold" colspan="10">伙食补助费申报表</td>
              </tr>
              <tr>
                <td style="width: 70px">序号</td>
                <td>姓名</td>
                <td>时间</td>
                <td style="width: 100px">天数</td>
                <td>标准</td>
                <td style="width: 80px">申报金额</td>
                <td style="width: 80px">核准金额</td>
                <td>备注</td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form3.field1 }}
                  </template>
                  <el-input v-else v-model="form3.field1"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field2 }}
                  </template>
                  <el-input v-else v-model="form3.field2"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field3 }}
                  </template>
                  <el-date-picker v-else v-model="time3" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                                  start-placeholder="开始日期" end-placeholder="结束日期"
                  ></el-date-picker>
                </td>
                <td>
                  {{ form3.field4 }}天
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field5 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form3.field5"></el-input>
                </td>
                <td>
                  {{ form3.field4 * form3.field5 }}
                </td>
                <td>
                  {{ form3.field4 * form3.field5 }}
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field6 }}
                  </template>
                  <el-select v-else v-model="form3.field6">
                    <el-option :value="item.name" v-for="(item, index) in remarkList" :key="index"
                               :label="item.name"
                    ></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form3.field7 }}
                  </template>
                  <el-input v-else v-model="form3.field7"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field8 }}
                  </template>
                  <el-input v-else v-model="form3.field8"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field9 }}
                  </template>
                  <el-date-picker v-else v-model="time4" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                                  start-placeholder="开始日期" end-placeholder="结束日期"
                  ></el-date-picker>
                </td>
                <td>
                  {{ form3.field10 }}天
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field11 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form3.field11"></el-input>
                </td>
                <td>
                  {{ form3.field10 * form3.field11 }}
                </td>
                <td>
                  {{ form3.field10 * form3.field11 }}
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field12 }}
                  </template>
                  <el-select v-else v-model="form3.field12">
                    <el-option :value="item.name" v-for="(item, index) in remarkList" :key="index"
                               :label="item.name"
                    ></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form3.field13 }}
                  </template>
                  <el-input v-else v-model="form3.field13"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field14 }}
                  </template>
                  <el-input v-else v-model="form3.field14"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field15 }}
                  </template>
                  <el-date-picker v-else v-model="time5" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                                  start-placeholder="开始日期" end-placeholder="结束日期"
                  ></el-date-picker>
                </td>
                <td>
                  {{ form3.field16 }}天
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field17 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form3.field17"></el-input>
                </td>
                <td>
                  {{ form3.field16 * form3.field17 }}
                </td>
                <td>
                  {{ form3.field16 * form3.field17 }}
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field18 }}
                  </template>
                  <el-select v-else v-model="form3.field18">
                    <el-option :value="item.name" v-for="(item, index) in remarkList" :key="index"
                               :label="item.name"
                    ></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form3.field19 }}
                  </template>
                  <el-input v-else v-model="form3.field19"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field20 }}
                  </template>
                  <el-input v-else v-model="form3.field20"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field21 }}
                  </template>
                  <el-date-picker v-else v-model="time6" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                                  start-placeholder="开始日期" end-placeholder="结束日期"
                  ></el-date-picker>
                </td>
                <td>
                  {{ form3.field22 }}天
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field23 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form3.field23"></el-input>
                </td>
                <td>
                  {{ form3.field22 * form3.field23 }}
                </td>
                <td>
                  {{ form3.field22 * form3.field23 }}
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field24 }}
                  </template>
                  <el-select v-else v-model="form3.field24">
                    <el-option :value="item.name" v-for="(item, index) in remarkList" :key="index"
                               :label="item.name"
                    ></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form3.field25 }}
                  </template>
                  <el-input v-else v-model="form3.field25"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field26 }}
                  </template>
                  <el-input v-else v-model="form3.field26"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field27 }}
                  </template>
                  <el-date-picker v-else v-model="time7" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                                  start-placeholder="开始日期" end-placeholder="结束日期"
                  ></el-date-picker>
                </td>
                <td>
                  {{ form3.field28 }}天
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field29 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form3.field29"></el-input>
                </td>
                <td>
                  {{ form3.field28 * form3.field29 }}
                </td>
                <td>
                  {{ form3.field28 * form3.field29 }}
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field30 }}
                  </template>
                  <el-select v-else v-model="form3.field30">
                    <el-option :value="item.name" v-for="(item, index) in remarkList" :key="index"
                               :label="item.name"
                    ></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form3.field31 }}
                  </template>
                  <el-input v-else v-model="form3.field31"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field32 }}
                  </template>
                  <el-input v-else v-model="form3.field32"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field33 }}
                  </template>
                  <el-date-picker v-else v-model="time8" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                                  start-placeholder="开始日期" end-placeholder="结束日期"
                  ></el-date-picker>
                </td>
                <td>
                  {{ form3.field34 }}天
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field35 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form3.field35"></el-input>
                </td>
                <td>
                  {{ form3.field34 * form3.field35 }}
                </td>
                <td>
                  {{ form3.field34 * form3.field35 }}
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field36 }}
                  </template>
                  <el-select v-else v-model="form3.field36">
                    <el-option :value="item.name" v-for="(item, index) in remarkList" :key="index"
                               :label="item.name"
                    ></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form3.field37 }}
                  </template>
                  <el-input v-else v-model="form3.field37"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field38 }}
                  </template>
                  <el-input v-else v-model="form3.field38"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field39 }}
                  </template>
                  <el-date-picker v-else v-model="time9" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                                  start-placeholder="开始日期" end-placeholder="结束日期"
                  ></el-date-picker>
                </td>
                <td>
                  {{ form3.field40 }}天
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field41 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form3.field41"></el-input>
                </td>
                <td>
                  {{ form3.field40 * form3.field41 }}
                </td>
                <td>
                  {{ form3.field40 * form3.field41 }}
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field42 }}
                  </template>
                  <el-select v-else v-model="form3.field42">
                    <el-option :value="item.name" v-for="(item, index) in remarkList" :key="index"
                               :label="item.name"
                    ></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form3.field43 }}
                  </template>
                  <el-input v-else v-model="form3.field43"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field44 }}
                  </template>
                  <el-input v-else v-model="form3.field44"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field45 }}
                  </template>
                  <el-date-picker v-else v-model="time10" value-format="yyyy-MM-dd" type="daterange"
                                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                  ></el-date-picker>
                </td>
                <td>
                  {{ form3.field46 }}天
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field47 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form3.field47"></el-input>
                </td>
                <td>
                  {{ form3.field46 * form3.field47 }}
                </td>
                <td>
                  {{ form3.field46 * form3.field47 }}
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field48 }}
                  </template>
                  <el-select v-else v-model="form3.field48">
                    <el-option :value="item.name" v-for="(item, index) in remarkList" :key="index"
                               :label="item.name"
                    ></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>
                  <template v-if="!edit">
                    {{ form3.field49 }}
                  </template>
                  <el-input v-else v-model="form3.field49"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field50 }}
                  </template>
                  <el-input v-else v-model="form3.field50"></el-input>
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field51 }}
                  </template>
                  <el-date-picker v-else v-model="time11" value-format="yyyy-MM-dd" type="daterange"
                                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                  ></el-date-picker>
                </td>
                <td>
                  {{ form3.field52 }}天
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field53 }}
                  </template>
                  <el-input type="number" v-else v-model.number="form3.field53"></el-input>
                </td>
                <td>
                  {{ form3.field52 * form3.field53 }}
                </td>
                <td>
                  {{ form3.field52 * form3.field53 }}
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field54 }}
                  </template>
                  <el-select v-else v-model="form3.field54">
                    <el-option :value="item.name" v-for="(item, index) in remarkList" :key="index"
                               :label="item.name"
                    ></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td colspan="2">合计</td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field55 }}
                  </template>
                  <el-input v-else v-model="form3.field55"></el-input>
                </td>
                <td>
                  {{ form3.field4 + form3.field10 + form3.field16 + form3.field22 + form3.field28 + form3.field34 + form3.field40 + form3.field46 + form3.field52 }}天
                </td>
                <td>
                  {{ form3.field5 + form3.field11 + form3.field17 + form3.field23 + form3.field29 + form3.field35 + form3.field41 + form3.field47 + form3.field53 }}
                </td>
                <td>
                  {{ form3.field4 * form3.field5 + form3.field10 * form3.field11 + form3.field16 * form3.field17 + form3.field22 * form3.field23 + form3.field28 * form3.field29 + form3.field34 * form3.field35 + form3.field40 * form3.field41 + form3.field46 * form3.field47 + form3.field52 * form3.field53 }}
                </td>
                <td>
                  {{ form3.field4 * form3.field5 + form3.field10 * form3.field11 + form3.field16 * form3.field17 + form3.field22 * form3.field23 + form3.field28 * form3.field29 + form3.field34 * form3.field35 + form3.field40 * form3.field41 + form3.field46 * form3.field47 + form3.field52 * form3.field53 }}
                </td>
                <td>
                  <template v-if="!edit">
                    {{ form3.field56 }}
                  </template>
                  <el-input v-else v-model="form3.field56"></el-input>
                </td>
              </tr>
              <tr>
                <td>说明</td>
                <td colspan="7" style="text-align: left;padding: 0 10px">
                  途中伙食补助费和住勤期间伙食补助费分别填列，途中伙食补助费按照自然（日历）天数申报，不足一天的按一天申报，途中伙食补助费与住勤期间伙食补助费不得重复申报。
                </td>
              </tr>
              <tr>
                <td style="border: none" colspan="5"></td>
                <td colspan="3" style="text-align: right;border: none">
                  填制人：
                  <template v-if="!edit">
                    {{ form3.field57 }}
                  </template>
                  <el-input v-else v-model="form3.field57"></el-input>
                </td>
              </tr>
              </tbody>
            </table>
          </template>
        </div>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import * as categoryApi from '@/api/categoryApi'
import * as selfUtil from '@/utils/ZBKJIutil'
import printJS from 'print-js'

export default {
  data() {
    return {
      edit: true,
      type: 1,
      time: [],
      time2: [],

      time3: [],
      time4: [],
      time5: [],
      time6: [],
      time7: [],
      time8: [],
      time9: [],
      time10: [],
      time11: [],
      time12: [],
      form: {
        field1: '',
        field2: '',
        field3: '',
        field4: '',
        field5: '',
        field6: '',
        field7: '0天',
        field8: 0,
        field9: 0,

        field11: 0,
        field12: 0,
        field13: 0,
        field14: 0,
        field15: 0,
        field16: 0,

        field18: 0,
        field19: 0,
        field20: 0,
        field21: 0,
        field22: 0,
        field23: 0,

        field25: 0,
        field26: 0,
        field27: 0,
        field28: 0,

        field33: 0,
        field34: 0,
        field35: 0,
        field36: 0,
        field37: 0,
        field38: 0,
        field39: 0,

        field46: 0,
        field47: 0,

        field49: 0,
        field50: 0,
        field51: 0,
        field52: 0,

        field54: 0,
        field55: 0,

        field57: 0,
        field58: 0,
        field59: 0,
        field60: 0,

        field63: 0,
        field64: 0

      },
      form2: {
        field1: '',
        field2: '',
        field3: '',
        field4: '',

        field5: '',
        field6: [],

        field7: '',
        field8: '',
        field9: '',
        field10: false,

        field11: '',
        field12: '',
        field13: '',
        field14: false,

        field15: '',
        field16: '',
        field17: '',
        field18: false,

        field19: '',
        field20: '',
        field21: '',
        field22: false,

        field23: '',
        field24: '',
        field25: '',
        field26: false,

        field27: '',
        field28: '',
        field29: '',
        field30: false,

        field31: '',
        field32: ''

      },
      form3: {
        field1: '1',
        field2: '',
        field3: '',
        field4: 0,
        field5: 0,
        field6: '',

        field7: '2',
        field8: '',
        field9: '',
        field10: 0,
        field11: 0,
        field12: '',

        field13: '3',
        field14: '',
        field15: '',
        field16: 0,
        field17: 0,
        field18: '',

        field19: '4',
        field20: '',
        field21: '',
        field22: 0,
        field23: 0,
        field24: '',

        field25: '5',
        field26: '',
        field27: '',
        field28: 0,
        field29: 0,
        field30: '',

        field31: '6',
        field32: '',
        field33: '',
        field34: 0,
        field35: 0,
        field36: '',

        field37: '7',
        field38: '',
        field39: '',
        field40: 0,
        field41: 0,
        field42: '',

        field43: '8',
        field44: '',
        field45: '',
        field46: 0,
        field47: 0,
        field48: '',

        field49: '9',
        field50: '',
        field51: '',
        field52: 0,
        field53: 0,
        field54: '',

        field55: '',
        field56: '',
        field57: ''
      },
      categoryProps: {
        value: 'name',
        label: 'name',
        children: 'child',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false
      },
      department: [],
      remarkList: [{ id: 1, name: '途中伙食补助' }, { id: 2, name: '住勤伙食补助' }]
    }
  },
  watch: {
    time(val) {
      if (val && val.length) {
        this.form.field6 = val[0] + ' 至 ' + val[1]
        this.form.field7 = this.getDay(val) + '天'
      } else {
        this.form.field7 = '0天'
      }
    },
    time2(val) {
      if (val && val.length) {
        this.form2.field5 = val[0] + ' 至 ' + val[1]
      }
    },
    time3(val) {
      if (val && val.length) {
        this.form3.field3 = val[0] + ' 至 ' + val[1]
        this.form3.field4 = this.getDay(val)
      } else {
        this.form3.field4 = 0
      }
    },
    time4(val) {
      if (val && val.length) {
        this.form3.field9 = val[0] + ' 至 ' + val[1]
        this.form3.field10 = this.getDay(val)
      } else {
        this.form3.field10 = 0
      }
    },
    time5(val) {
      if (val && val.length) {
        this.form3.field15 = val[0] + ' 至 ' + val[1]
        this.form3.field16 = this.getDay(val)
      } else {
        this.form3.field16 = 0
      }
    },
    time6(val) {
      if (val && val.length) {
        this.form3.field21 = val[0] + ' 至 ' + val[1]
        this.form3.field22 = this.getDay(val)
      } else {
        this.form3.field22 = 0
      }
    },
    time7(val) {
      if (val && val.length) {
        this.form3.field27 = val[0] + ' 至 ' + val[1]
        this.form3.field28 = this.getDay(val)
      } else {
        this.form3.field28 = 0
      }
    },
    time8(val) {
      if (val && val.length) {
        this.form3.field33 = val[0] + ' 至 ' + val[1]
        this.form3.field34 = this.getDay(val)
      } else {
        this.form3.field34 = 0
      }
    },
    time9(val) {
      if (val && val.length) {
        this.form3.field39 = val[0] + ' 至 ' + val[1]
        this.form3.field40 = this.getDay(val)
      } else {
        this.form3.field40 = 0
      }
    },
    time10(val) {
      if (val && val.length) {
        this.form3.field45 = val[0] + ' 至 ' + val[1]
        this.form3.field46 = this.getDay(val)
      } else {
        this.form3.field46 = 0
      }
    },
    time11(val) {
      if (val && val.length) {
        this.form3.field51 = val[0] + ' 至 ' + val[1]
        this.form3.field52 = this.getDay(val)
      } else {
        this.form3.field52 = 0
      }
    }
  },
  methods: {
    getDay(date) {
      // 将日期字符串转换为时间戳（毫秒）
      const startTimestamp = new Date(date[0]).getTime()
      const endTimestamp = new Date(date[1]).getTime()

      // 计算毫秒数差值
      const diffMilliseconds = Math.abs(endTimestamp - startTimestamp)

      // 一天的毫秒数
      const oneDayMilliseconds = 24 * 60 * 60 * 1000

      // 计算天数
      return Math.ceil(diffMilliseconds / oneDayMilliseconds) + 1
    },
    handlerPrint() {
      this.edit = false
      this.$nextTick(() => {
        printJS({
          printable: 'table',
          type: 'html',
          scanStyles: true,
          targetStyles: ['*'],
          style: this.type == 2 ? '@page {margin:10mm auto};' : '@page {margin:10mm 40mm};'
        })
      })
    },
    getDepartment() {
      this.loading = true
      categoryApi.treeCategroy({}, 3).then(data => {
        this.department = selfUtil.addTreeListLabel(data)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  },
  mounted() {
    this.getDepartment()
  }
}
</script>
<style lang="scss" scoped>
.page.normal {
  width: 1000px;
  height: 707px;
}

.page.col {
  width: 707px;
  height: 1000px;
}

.page {
  display: flex;
  align-items: center;
  justify-content: center;

  .table {
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;

    td {
      font-size: 16px;
    }
  }
}
</style>
